<template>
  <div v-if="userData">
    <Topnav titleTxt="编辑页面"></Topnav>
    <!-- 头像 -->
    <div class="head_pic">
      <img v-if="userData.head_img" :src="this.$axios.defaults.baseURL+userData.head_img" alt />
      <img v-else src="@/assets/logo.png" alt />
      <van-uploader :after-read="afterRead" class="boxStyle" />
    </div>
    <div class="userInfo">
      <!-- 昵称 -->
      <TabBar lefttext="昵称" :righttext="userData.nickname" @handleClick="isshowNickname=true"></TabBar>
      <!-- 密码 -->
      <TabBar lefttext="密码" righttext="******" @handleClick="isshowPwd=true"></TabBar>
      <!-- 性别 -->
      <TabBar
        lefttext="性别"
        :righttext="userData.gender==1?'小哥哥':'小姐姐'"
        @handleClick="isshowGender=true"
      ></TabBar>
    </div>

    <!-- 弹窗组件调用 -->
    <van-dialog
      v-model="isshowNickname"
      title="昵称"
      show-cancel-button
      @confirm="handleData({nickname:nickname})"
    >
      <van-field v-model="nickname" placeholder="请输入昵称" type="text" />
    </van-dialog>
    <van-dialog
      v-model="isshowPwd"
      title="密码"
      show-cancel-button
      @confirm="handleData({password:password})"
    >
      <van-field v-model="password" placeholder="请输入密码" type="password" />
    </van-dialog>

    <van-action-sheet
      v-model="isshowGender"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
    />
  </div>
</template>
<script>
// 引入topnav
import Topnav from "@/components/TopNav.vue";
import TabBar from "@/components/TabBar.vue";
export default {
  // 这里是注册组件
  components: {
    Topnav,
    TabBar
  },
  data() {
    return {
      userData: null,
      isshowNickname: false,
      isshowPwd: false,
      isshowGender: false,
      actions: [{ name: "男" }, { name: "女" }],
      nickname: "",
      password: "",
      gender: "",
      fileList: []
    };
  },
  methods: {
    loadpage() {
      //   获取本地的id
      const Id = localStorage.getItem("id");
      this.$axios({
        url: "/user/" + Id,
        method: "GET",
        //授权token，检验是否登录
        headers: {
          Authorization: localStorage.getItem("token")
        }
      })
        .then(res => {
          //   console.log(res);
          const { data } = res.data;
          //   console.log(data);
          this.userData = data;
        })
        .catch(err => {
          this.$toast.fail("系统错误");
        });
    },
    //封装修改数据的函数
    handleData(userdata) {
      const Id = localStorage.getItem("id");
      this.$axios({
        url: "/user_update/" + Id,
        method: "POST",
        headers: {
          Authorization: localStorage.getItem("token")
        },
        data: userdata
      }).then(res => {
        console.log(res);
        const { data } = res.data;
        if (res.status === 200) {
          // this.userData.nickname = data.nickname;
          this.loadpage();
        }
      });
    },
    onChange(picker, value, index) {
      this.$toast(`当前值：${value}, 当前索引：${index}`);
    },
    onSelect(item) {
      this.isshowGender = false;
      this.handleData({ gender: item.name == "男" ? 1 : 0 });
      this.$toast(item.name);
    },
    afterRead(fileObj) {
      // 此时可以自行将文件上传至服务器
      // console.log(fileObj);
      // console.log(fileObj.file);
      const formdata = new FormData();
      formdata.append("file", fileObj.file);
      //发送axios请求
      this.$axios({
        url: "/upload",
        method: "POST",
        data: formdata
      }).then(res => {
        // console.log(res);
        const { data } = res.data;
        console.log(this.$axios.defaults.baseURL + data.url);
        //调用loadpage函数重新获取数据
        this.handleData({ head_img: data.url });
      });
    }
  },

  mounted() {
    //调用loadpage,页面一加载就渲染数据
    this.loadpage();
  }
};
</script>


<style lang="less" scoped>
// 这里是css样式
.userInfo {
  margin-top: 24px;
}
.head_pic {
  text-align: center;
  position: relative;
  margin-top: 34px;
  img {
    border-radius: 50%;
    width: 19.444vw;
    height: 19.444vw;
  }
  .boxStyle {
    position: absolute;
    left: 0;
    top: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
.savevalue {
  width: 100%;
  height: 11.111vw;
  background: none;
  color: #666;
  margin-top: 10px;
  border: none;
}
</style>